<template>
  <div class="gis-progress-container">
    <div class="img-box">
      <img :src="getImg" class="" @click="setPlayStatus(status)" />
    </div>
    <div class="dropdown-content">
      <el-dropdown @command="handleCommand">
        <span class="el-dropdown-link">
          {{ getDropdownTitle }}
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item
            v-for="(item, index) in speedList"
            :key="index"
            :command="item.value"
            >{{ item.label }}</el-dropdown-item
          >
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <BaseProgress
      class="c-progress"
      :dateList="dateList"
      @percentChange="onPercentChange"
    />
  </div>
</template>
<script>
import BaseProgress from './base-progress.vue'
import { getDayDetailList } from '@/apis/gis'
import { createNamespacedHelpers } from 'vuex'
const {
  mapState: mapStateForm,
  mapMutations: mapMutationsForm
} = createNamespacedHelpers('gisForm')
export default {
  components: { BaseProgress },
  data() {
    return {
      value: 0,
      step: 90,
      status: 0,
      speedList: [
        { value: 1, label: '1.0x' },
        { value: 2, label: '2.0x' }
      ],
      playSpeed: 1,
      time: 60,
      timer: null
    }
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  created() {
    this.queryDay()
  },
  mounted() {},
  watch: {
    day(nv) {
      const date = this.dateList[0].day
      window.console.log(this.status, 'this.status==')
      if (this.status != 2 && nv == date) {
        clearInterval(this.timer)
        this.timer = null
        this.status = 0
        // this.timeOut()
      }
    }
  },
  methods: {
    ...mapMutationsForm(['setDayDis', 'setDayList']),
    // 播放倍数
    handleCommand(command) {
      this.playSpeed = command
      if (this.status) {
        clearInterval(this.timer)
        this.timer = null
        this.timeOut()
      }
    },
    // 修改进度条进度
    onPercentChange(value) {
      this.setDayDis(value)
      if (this.status) {
        clearInterval(this.timer)
        this.timer = null
        this.timeOut()
      }
    },
    // 播放/暂停
    setPlayStatus(status) {
      this.status = status ? 0 : 1
      if (!status) {
        this.timeOut()
      } else {
        clearInterval(this.timer)
        this.timer = null
      }
    },
    // 播放定时器
    timeOut() {
      const intervalTime = 2000 / this.getDropdownValue
      const { day, dateList } = this
      const count = this.getResidueList(day)
      const timeCount = count.length
      if (!this.timer) {
        this.time = timeCount
        this.timer = setInterval(() => {
          if (this.time > 0 && this.time <= timeCount) {
            this.time--
            this.setDayDis(count[this.time])
            this.status = 1
          } else {
            this.status = 2 // 播放
            // 开始重新播放
            clearInterval(this.timer)
            this.timer = null
            this.setDayDis(dateList[0].day)
            this.timeOut()
          }
        }, intervalTime)
      }
    },
    // 获取日期
    queryDay() {
      getDayDetailList().then(data => {
        if (data.code == 1) {
          // this.status = 1 // 播放
          this.setDayList(data.data)
          this.setDayDis(data.data[0].day)
          // clearInterval(this.timer)
          // this.timer = null
          // this.timeOut()
        }
      })
    }
  },
  computed: {
    ...mapStateForm(['day', 'type', 'dateList']),
    getImg() {
      return this.status
        ? require('./images/pause.png')
        : require('./images/play.png')
    },
    getDropdownTitle() {
      const obj = this.speedList.find(item => item.value == this.playSpeed)
      return obj.label
    },
    getDropdownValue() {
      const obj = this.speedList.find(item => item.value == this.playSpeed)
      return obj.value
    },
    getResidueList() {
      return function(currentValue) {
        const dayList = this.dateList.map(item => item.day)
        let index = dayList.indexOf(currentValue)
        index = index != -1 ? index + 1 : 0
        dayList.splice(0, index)
        dayList.reverse()
        return dayList
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.gis-progress-container {
  width: 330px;
  height: 40px;
  background: #ffffff;
  border-radius: 4px;
  display: flex;
  align-items: center;
  padding: 6px 8px;
  .img-box {
    padding-right: 10px;
    cursor: pointer;
    img {
      width: 24px;
    }
  }
  .dropdown-content {
    margin-right: 20px;
    border: 1px solid #99a2b1;
    padding: 0 5px;
    color: #99a2b1;
    border-radius: 4px;
    .el-dropdown {
      font-size: 12px;
      .el-dropdown-link.el-dropdown-selfdefine {
        cursor: pointer;
        line-height: 1;
        padding: 2px 0;
      }
    }
  }
}
</style>
